<template>
	<div class="RealTimeRow">
		<div class="allButomLable-box">
			<div class="butomLable">
				<div>
					<div>
						<p class="pageName titleText">数据库</p>
					</div>
				</div>
				<div class="ItemContainer">
					<div class="Chart">
						<div id="MainPageDATABASE"></div>
					</div>
					<div class="info">
						<div>
							<span style="display: block">告警数:<i style="font-style: normal; color:#FF4500">{{
                  realTimeData.db[0] || 0
                }}</i></span>
							<span style="display: block">总&nbsp;&nbsp;&nbsp;数:<i
									style="font-style: normal; color:#00EC00">{{ realTimeData.db[1] || 0}}</i></span>
						</div>
					</div>
				</div>
			</div>
			<div class="butomLable">
				<div>
					<div>
						<p class="pageName titleText">服务器</p>
					</div>
				</div>
				<div class="ItemContainer">
					<div class="Chart">
						<div id="MainPageSERVER"></div>
					</div>
					<div class="info">
						<div>
							<span style="display: block">告警数:<i style="font-style: normal; color:#FF4500">{{
                  realTimeData.os[0] || 0
                }}</i></span>
							<span style="display: block">总&nbsp;&nbsp;&nbsp;数:<i
									style="font-style: normal; color:#00EC00">{{ realTimeData.os[1] || 0}}</i></span>
						</div>
					</div>
				</div>
			</div>
			<div class="butomLable">
				<div>
					<div>
						<p class="pageName titleText">{{type}}</p>
					</div>
				</div>
				<div class="ItemContainer">
					<div class="Chart">
						<div id="MainPageNETWOEK"></div>
					</div>
					<div class="info">
						<div>
							<span style="display: block">告警数:<i style="font-style: normal; color:#FF4500">{{
                  realTimeData.net[0] || 0
                }}</i></span>
							<span style="display: block">总&nbsp;&nbsp;&nbsp;数:<i
									style="font-style: normal; color:#00EC00">{{ realTimeData.net[1] || 0 }}</i></span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '../../../../../public/config.js';
	import {
		fetchData,
		getFaultStatistics,
		getRealTime
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import {
		RingProgress
	} from "@antv/g2plot";

	export default {
		data() {
			return {
				postData: {
					opera: "dbConnect",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				type:config.type,
				postOSData: {
					opera: "hostconnect",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				postNetData: {
					opera: "hostconnect",
					curPage: 1,
					pageSize: 2000,
					sort: {
						sortColumn: "monid",
						sortOrders: "asc",
					},
					filtersType: "exactquery",
					filters: {
						os_type: "Network",
					},
				},
				timerName: "RealTime",
				timerEventName: "timerRealTime",
				timerInterval: 1000 * 30,
				realTimeData: {
					db: 0,
					os: 0,
					net: 0,
				},
				// widthPX: '',
				progressWidth: "",
				screenWidth: "",
				loading: false,
				PostInfoData: {
					db: "",
					os: "",
					net: "",
				},
				DBChart: "",
				SERVERChart: "",
				NETWORKChart: "",
			};
		},
		created() {
			this.initData();
			this.timein();

			// this.getOSData();
			// this.getNetData();
			this.getScreenWidth();
			// this.widthPXFn();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					// this.getData();
					// this.getOSData();
					// this.getNetData();
					this.initData();

				}
			});
		},
		mounted() {
			this.initChart();
		},
		updated() {},
		computed: {},

		methods: {
			timein(){
				this.timer = setInterval(() => {
				  // 操作
				  this.initData();
				}, 30000);
				
			},
			initData() {
				getRealTime().then((_) => {
					console.log(_.port)
					if (_) {
						if(this.type == '端口'){
							this.realTimeData.net = _.port
						}else{
							this.realTimeData.net = _.Network
						}
						this.realTimeData.db = _.db
						this.realTimeData.os = _.os
						this.DBChart.changeData(Number(this.realTimeData.db[2] / 100 ? this.realTimeData.db[2] /
							100 : 0));
						this.SERVERChart.changeData(Number(this.realTimeData.os[2] / 100 ? this.realTimeData.os[
							2] / 100 : 0));
						this.NETWORKChart.changeData(Number(this.realTimeData.net[2] / 100 ? this.realTimeData.net[
							2] / 100 : 0));


					}
				});
			},
			initChart() {
				this.DBChart = new RingProgress("MainPageDATABASE", {
					height: 80,
					width: 80,
					autoFit: false,
					percent: "",
					color: ["#00FF00", "#E8EDF3"],
					innerRadius: 0.85,
					radius: 0.98,
					statistic: {
						title: {
							style: {
								color: "#FFF",
								fontSize: "12px",
								lineHeight: "14px"
							},
							formatter: () => "健康度",
						},
						content: {
							style: {
								color: "#FFF",
							}
						}

					},

				});

				this.SERVERChart = new RingProgress("MainPageSERVER", {
					height: 80,
					width: 80,
					autoFit: false,
					percent: "",
					color: ["#00FF00", "#E8EDF3"],
					innerRadius: 0.85,
					radius: 0.98,
					statistic: {
						title: {
							style: {
								color: "#FFF",
								fontSize: "12px",
								lineHeight: "14px"
							},
							formatter: () => "健康度",
						},
						content: {
							style: {
								color: "#FFF",
							}
						}
					},
				});

				this.NETWORKChart = new RingProgress("MainPageNETWOEK", {
					height: 80,
					width: 80,
					autoFit: false,
					percent: "",
					color: ["#00FF00", "#E8EDF3"],
					innerRadius: 0.85,
					radius: 0.98,
					statistic: {
						title: {
							style: {
								color: "#FFF",
								fontSize: "12px",
								lineHeight: "14px"
							},
							formatter: () => "健康度",
						},
						content: {
							style: {
								color: "#FFF",
							}
						}
					},
				});
				this.DBChart.render();
				this.SERVERChart.render();
				this.NETWORKChart.render();
			},

			// getData(){
			// fetchData({
			//     postData : JSON.stringify(this.postData)
			// }).then((res) => {
			//     // console.log(res)
			//     let _jkNum = 0;
			//     res.data.forEach(element => {
			//         if (element.MAX_ALERTLEVEL < 2) {
			//             _jkNum ++;
			//         }
			//     });

			//     this.realTimeData.db = this.formatData(_jkNum, res.dataTotal);
			// });

			// },
			// getOSData(){
			//     fetchData({
			//         postData : JSON.stringify(this.postOSData)
			//     }).then((res) => {
			//         let _jkNum = 0;
			//         res.data.forEach(element => {
			//             if (element.MAX_ALERTLEVEL < 2) {
			//                 _jkNum ++;
			//             }
			//         });

			//         this.realTimeData.os = this.formatData(_jkNum, res.dataTotal);
			//     });
			// },
			// getNetData(){
			//     fetchData({
			//         postData : JSON.stringify(this.postNetData)
			//     }).then((res) => {

			//         let _jkNum = 0;
			//         res.data.forEach(element => {
			//             if (element.MAX_ALERTLEVEL < 2) {
			//                 _jkNum ++;
			//             }
			//         });

			//         this.realTimeData.net = this.formatData(_jkNum, res.dataTotal);
			//     });
			// },
			// formatData(data1, data2) {
			//     //避免输出 NaN
			//     if(data1==0){
			//         return 0
			//     }else{
			//         return Number((this.calcChu(data1, data2) * 100).toFixed(1));
			//     }

			// },
			getScreenWidth() {
				this.screenWidth = window.screen.width;
				if (this.screenWidth < 1370) {
					this.progressWidth = 58;
				}
				if (this.screenWidth > 1370) {
					this.progressWidth = 60;
				}
			},

			// widthPXFn(){
			//     this.widthPX = this.$refs.progress-box.clientWidth;
			//     return this.widthPX;
			//     console.log(this.$refs.progress-box.clientWidth);
			// }
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			this.DBChart.destroy();
			this.SERVERChart.destroy();
			this.NETWORKChart.destroy();
		},
		watch: {},
	};
</script>

<style scoped>
	@media screen and (max-height: 1000px) {
		.RealTimeRow {
			overflow-y: scroll;
		}

		.RealTimeRow::-webkit-scrollbar {
			width: 5px;
			height: 6px;
		}

		.RealTimeRow::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: #042463;
		}

		.RealTimeRow::-webkit-scrollbar-track {
			background: rgba(0, 0, 0, 0);
		}
	}

	@media screen and (max-width: 1365px) and (min-width: 1280px) {
		.pageName {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {
		.pageName {
			font-size: 14px;
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1600px) {
		.pageName {
			font-size: 16px;
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {
		.pageName {
			font-size: 18px;
		}
	}

	@media screen and (max-width: 3840px) and (min-width: 2560px) {
		.pageName {
			font-size: 24px;
		}
	}

	@media screen and (min-width: 3840px) {
		.pageName {
			font-size: 30px;
		}
	}

	.RealTimeRow {
		/* height: calc(100% - 22px - 8px); */
		/* text-align: center; */
		height: 99%;
		color: aliceblue;
		display: grid;
		grid-template-rows: 60% 29%;
	}

	.allButomLable-box {
		/* height: 80%; */
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.allPageName-box {
		/* height: calc(100% - 80% - 2%); */
		margin-top: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		font-size: 12px;
	}

	.butomLable {
		height: 100%;
		/* text-align: center; */
		/* overflow: hidden; */
		display: grid;
		align-content: center;
		justify-content: center;
		/* border: 1px solid red; */
	}

	.butomLable>>>.el-progress__text {
		color: aliceblue;
		/* font-size: x-large !important; */
	}

	.progress-box {
		height: 100%;
		overflow: hidden;
	}

	.pageNames {
		height: 100%;
		overflow: hidden;
		padding: 0px 0px 0px 0px !important;
		text-align: center;
		/* border: 1px solid yellow; */
		display: grid;
		justify-items: center;
		width: 60%;
	}

	.titleText {
		/* width: 60%; */
		/* margin: 0 auto 8px auto; */
		border-radius: 20px;
		box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
		line-height: 22px;
	}

	.ItemContainer {
		width: 100%;

		margin-top: 5px;
		display: grid;
		grid-template-rows: 1fr 1fr;
	}

	.info div span {
		font-size: 14px;
	}
</style>
